<template>
	<view v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'业绩排名'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright">
					<text @click="show=true">筛选</text>
					<view class="selecticon"></view>
				</view>
			</view>
		</header-top>
		<!-- <view class="tabtags">
			<view :class="item.id==tabtags?'focus flexcolumn':'nofocus flexcolumn'" v-for="item in tabs" :key="item.id"
				@click="changetab(item.id)">
				<view>{{item.name}}</view>
				<view :class="item.id==tabtags?'outline':'noline'" class="outline"></view>
			</view>
		</view> -->
		<!-- 日期选择器 -->
		<u-datetime-picker :show="show" mode="date" @cancel="show=false" @confirm="confirm">
		</u-datetime-picker>
		<u-datetime-picker :show="showEnd" mode="date" @cancel="showEnd=false"
			@confirm="endConfirm"></u-datetime-picker>
		<view>
			<view class="mainpadding2">
				<view class="itembox mainpadding radius margin_top  ffffff" v-for="(item,index) in list.data"
					:key="item.id">

					<view class="right-content flexleft">
						<view v-show="index==0" class="num berone"></view>
						<view v-show="index==1" class="num bertwo"></view>
						<view v-show="index==2" class="num berthree"></view>
						<view v-show="index>=3" class="num">{{index+1}}</view>
						<view class="strongtext flexleft">{{item.name || ""}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 个人业绩 -->
		<!-- <view v-if="tabtags==0">
			<view class="charttop flexbetween">
				<view class="timebox flexleft" @click="show=true">
					<text>{{timevalueone}}</text>
					<view class="selecticon2"></view>
				</view>
				<view class="flexleft">
					<view class="charttuli margin_rightten margin_rightfive">昨日</view>
					<view class="colorbox1 margin_rightfive"></view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten margin_rightfive">今日</view>
					<view class="colorbox3 margin_rightfive"></view>
					<view class="colorbox4 margin_rightfive"></view>
				</view>
				<view class="ranktitle flexleft">
					<view class="upordown_up" v-if="dataAll1.paiming>=0"></view>
					<view class="upordown_down" v-if="dataAll1.paiming<0"></view>
					<text class="green">{{dataAll1.paiming}}名</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
			<view class="mainpadding">
				<view class="msgtitle flexbetween">
					<text>昵称</text>
					<text>销售净额</text>
				</view>
				<view class="andline flexbetween" v-for="item in dataAll1.list" :key="item.id">
					<text>{{item.name}}</text>
					<text>{{item.user_yeji}}元</text>
				</view>
			</view>
		</view> -->
		<!-- 团队业绩 -->
		<!-- <view v-else="tabtags==1">
			<view class="charttop flexbetween">
				<view class="timebox flexleft" @click="show=true">
					<text>{{timevaluetwo}}</text>
					<view class="selecticon2"></view>
				</view>
				<view class="flexleft">
					<view class="charttuli margin_rightten margin_rightfive">昨日</view>
					<view class="colorbox1 margin_rightfive"></view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten margin_rightfive">今日</view>
					<view class="colorbox3 margin_rightfive"></view>
					<view class="colorbox4 margin_rightfive"></view>
				</view>
				<view class="ranktitle flexleft">
					<view class="upordown_up" v-if="dataAll2.paiming>=0"></view>
					<view class="upordown_down" v-if="dataAll2.paiming<0"></view>
					<text class="green">{{dataAll2.paiming}}名</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartDatatwo" />
			</view>
			<view class="mainpadding">
				<view class="msgtitle flexbetween">
					<text>昵称</text>
					<text>销售净额</text>
				</view>
				<view class="andline flexbetween" v-for="item in dataAll2.list" :key="item.id">
					<text>{{item.name}}</text>
					<text>{{item.tuandui_yeji}}元</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				showEnd:false,
				start_time:"",
				end_time:"",
				// 时间选择器
				timevalueone: "筛选日期", //选择的日期
				timevaluetwo: "筛选日期", //选择的日期
				show: false,
				value1: Number(new Date()),
				// 0个人业绩,1团队业绩
				tabtags: 0,
				tabs: [{
						id: 0,
						name: "个人业绩",
					},
					{
						id: 1,
						name: "团队业绩",
					}
				],
				// 个人业绩图表
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					color: ["#1ED76D", "#FFEAB5", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 15, 15, 5],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#333", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						axisLine: false, //x轴坐标轴线是否绘制
						disableGrid: true,
						fontColor: "#333", //文字颜色
						rotateLabel: true //文字旋转
					},
					yAxis: { //y轴
						disableGrid: false, //true不显示横线线，false显示横线
						gridType: "dash", //横线类型
						dashLength: 8, //当为虚线时虚线的长度
						data: [{
							min: 0, //起始值
							fontColor: "#999",
							axisLine: false, //y轴坐标轴线是否绘制
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: true, //顶部是否为圆角
						}
					}
				},
				// 团队业绩图表
				chartDatatwo: {},
				dataAll1: {
					paiming: "",
					list: [{
						id: 0, //id
						name: "", //姓名
						user_yeji: 0, //个人业绩
						tuandui_yeji: "" //团队业绩
					}]
				},
				dataAll2: {
					paiming: "",
					list: [{
						id: 0, //id
						name: "", //姓名
						user_yeji: 0, //个人业绩
						tuandui_yeji: "" //团队业绩
					}]
				},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow:false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this
				httpRequest.request('/employeesapi/shop/shopList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.start1, //开始时间
					end_time: this.end1, //结束时间
					yxe_sort: 1,
				}).then(res => {
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						_this.list = resList
						_this.list.data = resList.data;
					}
					_this.pageShow=true
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 个人业绩
			init1() {
				httpRequest.request('/appapi/staff/user/myyuangongpm', 'POST', {
					type: 1,
					time: this.timevalueone == "筛选时间" ? "" : this.timevalueone
				}).then(res => {
					let data = {
						categories: [],
						series: [{
								name: "昨日",
								data: []
							},
							{
								name: "今日",
								data: []
							}
						]
					};
					let userindex = 0
					res.data.list.forEach((item, index) => {
						data.categories.push(item.name)
						if (item.id == res.uid) {
							userindex = index
						}
					})
					res.data.yeji.forEach((item, index) => {
						if (userindex == index) {
							data.series[0].data.push({
								color: "#FDC871",
								value: item.zuori
							})
							data.series[1].data.push({
								color: "#FFEAB5",
								value: item.jinri
							})
						} else {
							data.series[0].data.push({
								color: "#3476fe",
								value: item.zuori
							})
							data.series[1].data.push({
								color: "#99C1FF",
								value: item.jinri
							})
						}
					})
					this.chartData = JSON.parse(JSON.stringify(data));
					this.dataAll1 = res.data
				})
			},
			// 团队业绩
			init2() {
				httpRequest.request('/appapi/staff/user/myyuangongpm', 'POST', {
					type: 2,
					time: this.timevaluetwo == "筛选时间" ? "" : this.timevalueone
				}).then(res => {
					let data = {
						categories: [],
						series: [{
								name: "昨日",
								data: []
							},
							{
								name: "今日",
								data: []
							}
						]
					};
					let userindex = 0
					res.data.list.forEach((item, index) => {
						data.categories.push(item.name)
						if (item.id == res.uid) {
							userindex = index
						}
					})
					res.data.yeji.forEach((item, index) => {
						if (userindex == index) {
							data.series[0].data.push({
								color: "#FDC871",
								value: item.zuori
							})
							data.series[1].data.push({
								color: "#FFEAB5",
								value: item.jinri
							})
						} else {
							data.series[0].data.push({
								color: "#3476fe",
								value: item.zuori
							})
							data.series[1].data.push({
								color: "#99C1FF",
								value: item.jinri
							})
						}
					})
					this.chartDatatwo = JSON.parse(JSON.stringify(data));
					this.dataAll2 = res.data
				})
			},
			changetab(id) {
				this.tabtags = id
			},
			// 时间选择点击确定
			confirm(e) {
				this.show = false
				this.showEnd=true
				this.start_time=this.date(e.value)
				// if (this.tabtags == 0) {
				// this.timevalueone = this.date(e.value)
				// } else if (this.tabtags == 1) {
				// this.timevaluetwo = this.date(e.value)
				// this.init1()
				// }
			},
			endConfirm(e){
				this.end_time=this.date(e.value)
				this.showEnd=false
				this.init()
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},

		}
	}
</script>

<style lang="scss">
	.num {
		width: 52rpx;
		height: 68rpx;
		margin-right: 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.berone {
		background-image: url('@/static/imags/mainrank/num1.png');
		background-size: 100% 100%;
	}

	.bertwo {
		background-image: url('@/static/imags/mainrank/num2.png');
		background-size: 100% 100%;
	}

	.berthree {
		background-image: url('@/static/imags/mainrank/num3.png');
		background-size: 100% 100%;
	}

	// 图表
	//图表头部
	.charttop {
		padding: 20rpx 30rpx 0 30rpx;
	}

	.timebox {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476fe
	}

	.ranktitle {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.upordown_up {
		width: 23rpx;
		height: 26rpx;
		background-image: url("@/static/imags/myemploy/up.png");
		background-size: 100% 100%;
	}

	.upordown_down {
		width: 23rpx;
		height: 26rpx;
		background-image: url("@/static/imags/myemploy/down.png");
		background-size: 100% 100%;
	}

	.green {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #72FF6F;
	}

	.red {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6F6F;
	}

	.charttuli {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.margin_rightfive {
		margin-right: 10rpx;
	}

	.colorbox1 {
		width: 39rpx;
		height: 22rpx;
		background-color: #3476fe;
	}

	.colorbox2 {
		width: 39rpx;
		height: 22rpx;
		background-color: #FDC871;
	}

	.colorbox3 {
		width: 39rpx;
		height: 22rpx;
		background-color: #BAD5FF;
	}

	.colorbox4 {
		width: 39rpx;
		height: 22rpx;
		background-color: #FFEAB5;
	}

	// 图表
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 500rpx;
	}

	// 底部内容
	.msgtitle {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.andline {
		padding: 20rpx 0 36rpx 0;
		margin-bottom: 10rpx;
		border-bottom: 1rpx solid #EBEBEB;
	}
</style>